<template>
	<div>
		<div class="recommend-title">热销推荐</div>
		<ul>
			<router-link
			tag="li"
			class="item border-bottom"
			v-for="item of list"
			:key="item.id"
            :to="'/detail/'+item.id"
			>
				<img class="item-img" :src="item.imgUrl">
               
               <div class="item-info ">
               	 <p class="item-title general">{{item.title}}</p>
               	 <p class="item-desc general">{{item.desc}}</p>
               </div>	 
			</router-link>
		</ul>
	</div>
</template>

<script>
export default{

name:'Recommend',
props:{
	
	list:Array
} 

}
</script>

<style lang="stylus" scoped>

@import '~styles/mixins.styl'
  .general
  	padding:.1rem
 .recommend-title
 	line-height: 0.8rem
 	margin-top:.2rem
 	background:#eee
 	text-indent:.2rem
 .item
 	overflow:hidden
 	display:flex 
 	height:1.9rem
 	.item-img
 		height:1.7rem
 		width:1.7rem
 		padding:.1rem
 	.item-info
 		flex:1	
 		padding:.1rem
 		min-width:0
 	.item-desc		
 		color:#eee
 		ellipsis()
 	.item-title
 		line-height:.54rem
 		font-size:.32rem
 		ellipsis()
 		.price-style
 			color:orange
 			font-size:.14rem
 			
</style>